<template>
    <div class="historyItem">
        <img :src="upBack" class="upBack" @click="backRouter"/>
        <div class="mainBG" v-if="showData.bgc.val || showData.bgc.val == 0">
            <img class="bgcIMG" :src="showData.bgc.val" style="width: 101vh;height: 101vw;" v-if="showData.bgc.type == 2"/>
            <img class="bgcIMG" :src="bgcList[showData.bgc.val - 11]" style="width: 101vh;height: 101vw;" v-if="showData.bgc.type == 1"/>
            <div class="mainBGC" :style="{ backgroundColor: colorList[showData.bgc.val] || '#000'}" v-else></div>
        </div>
        <div class="looKLED" :class="showData.scrollFX == 0 ? 'scrollRight' : showData.scrollFX == 1 ? 'scrollLeft' : ''">
            <div class="mainShape" v-if="showData.shapeID != -1" :style=" {backgroundImage:'url(' + shapePicList[showData.shapeID] + ')', fontFamily: showData.fontFamily,  fontSize: Number(showData.Size.replace('px', '')) * 2 + 'px' , backgroundSize: showData.shapeSize}" >{{ showData.text }}</div>
            <div class="mainTitle" :style="{color: showData.fontColor, fontFamily: showData.fontFamily,  fontSize: Number(showData.Size.replace('px', '')) * 2 + 'px', textShadow: `4px 4px 0px ${showData.shadowColor}`}">{{showData.text}}</div>
        </div>
    </div>
</template>
<script setup>
import upBack from '../assets/upBack.png'
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
const router = useRouter()
import {bgc1, bgc2, bgc3, bgc4, bgc5, bgc6, bgc7, bgc8, bgc9} from "../assets/led/bgcList"
import {shapePic1, shapePic2, shapePic3, shapePic4, shapePic5, shapePic6, shapePic7, shapePic8, shapePic9, shapePic10, shapePic11, shapePic12, shapePic13, shapePic14, shapePic15} from "../assets/led/shapeList"
let colorList = ref(['#FFFFFF', '#03DCFA', '#675BEE', '#E6FF80', '#FA5C03', '#C246FD', '#FA037A', '#5BEEC2', '#FFA680', '#FAE103'])
let bgcList = ref([bgc1, bgc2, bgc3, bgc4, bgc5, bgc6, bgc7, bgc8, bgc9])
let shapePicList = ref([shapePic1, shapePic2, shapePic3, shapePic4, shapePic5, shapePic6, shapePic7, shapePic8, shapePic9, shapePic10, shapePic11, shapePic12, shapePic13, shapePic14, shapePic15])
let route = useRoute()
let showIndex = ref('')
let showData = ref({})
showIndex.value = route.query.index
showData.value = JSON.parse(localStorage.getItem("LEDHistory"))[showIndex.value]
// showData.value.speed =  Number(showData.value.speed.replace('s', ''))  * 1 + 's'

let backRouter = () => {
    router.back()
}
</script>
<style scoped>
.historyItem {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}
.mainBG {
    position: absolute;
    width: 100vw;
    height: 100vh;
}
.mainBGC {
    width: 100%;
    height: 100%;
    /* background-color: v-bind('colorList[textStyle.bgc.val]'); */
}
.bgcIMG {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);

}
.looKLED {
    flex-shrink: 0;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    min-height: 100%;
    z-index: 9;
}
.mainTitle {
    writing-mode: vertical-lr;
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mainShape {
    writing-mode: vertical-lr;
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
    background-repeat: repeat;
    background-origin: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;  
}

.scrollRight {
    left: 0;
    animation: startRight v-bind('showData.speed') linear infinite;

}
@keyframes startRight {
    0% {
        transform: translateY(0%);
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
        transform: translateY(500%);
    }
    51% {
        opacity: 0;
        transform: translateY(-500%);
    }
    52% {
        opacity: 1;
        transform: translateY(-500%);
    }
    100% {
        transform: translateY(0%);
    }
}
.scrollLeft {
    left: 0;
    animation: startLeft v-bind('showData.speed') linear infinite;
}
@keyframes startLeft {
    0% {
        transform: translateY(0%);
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
        transform: translateY(-500%);
    }
    51% {
        opacity: 0;
        transform: translateY(500%);
    }
    52% {
        opacity: 1;
        transform: translateY(500%);
    }
    100% {
        transform: translateY(0%);
    }
}
.upBack {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50px;
    right: 50px;
    z-index: 100;
}
</style>
